<style include="cr-shared-style">
    [slot='title'] {
      --cr-primary-text-color: var(--cros-text-color-primary);
    }

    [slot='body'] > div {
      --cr-secondary-text-color: var(--cros-text-color-secondary);
      margin-bottom: var(--cr-form-field-bottom-spacing);
    }

    cr-dialog::part(dialog) {
      background-color: var(--cros-bg-color-elevation-3);
      border-radius: 12px;
      box-shadow: var(--cros-elevation-3-shadow);
      width: 512px;
    }

    cr-dialog::part(dialog) {
      max-height: 480px;
    }

    cr-dialog::part(dialog)::backdrop {
      background-color: var(--cros-app-shield-60);
    }

    cr-dialog::part(wrapper) {
      /* subtract the internal padding in <cr-dialog> */
      padding: calc(24px - 20px);
    }
</style>

<cr-dialog id="dialog"
  consume-keydown-event show-close-button close-text=$i18n{CLOSE_LABEL}>
  <div slot="title">
    $i18n{DLP_RESTRICTION_DETAILS_TITLE}
  </div>
  <div slot="body">
    <div id="message" cr-dialog-text>$i18n{DLP_RESTRICTION_DETAILS_MESSAGE}</div>
    <div id="details-container">
      <span id="block-details" hidden=true>
        <label>$i18n{DLP_RESTRICTION_DETAILS_BLOCK}</label>
        <ul id="block-list">
          <li id="block-li-urls" hidden=true>
            <label id="block-urls"></label>
          </li>
          <li id="block-li-components" hidden=true>
            <label id="block-components"></label>
          </li>
        </ul>
      </span>
      <span id="warn-details" hidden=true>
        <label>$i18n{DLP_RESTRICTION_DETAILS_WARN}</label>
        <ul id="warn-list">
          <li id="warn-li-urls" hidden=true>
            <label id="warn-urls"></label>
          </li>
          <li id="warn-li-components" hidden=true>
            <label id="warn-components"></label>
          </li>
        </ul>
      </span>
      <span id="report-details" hidden=true>
        <label>$i18n{DLP_RESTRICTION_DETAILS_REPORT}</label>
          <ul id="report-list">
            <li id="report-li-urls" hidden=true>
              <label id="report-urls"></label>
            </li>
            <li id="report-li-components" hidden=true>
              <label id="report-components"></label>
            </li>
          </ul>
        </span>
    </div>
  </div>
</cr-dialog>
